<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <link rel="stylesheet" href="CSS/common.css">
    <link rel="stylesheet" href="CSS/enroll.css">
    <link rel="stylesheet" href="layui-v2.8.0/layui/css/layui.css">
    <style>
        .layui-row{
            height: 50px;
            background-color: rgba(255,255,255,0.8);
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body>
<!--导航栏-->
<div class="nav">

    <div class="layui-row">
        <div class="layui-col-md7">
            <div class="grid-demo grid-demo-bg1">
                <div>
                    <img src="images/logo.png" alt="">
                    <span>个人博客系统</span>
                </div>
            </div>
        </div>
        <div class="layui-col-md1">
            <div class="grid-demo grid-demo-bg1">
                <img src="images/user.png" alt="">
                <span>未登录</span>
            </div>
        </div>
        <div class="layui-col-md1">
            <div class="grid-demo grid-demo-bg1">
                <a href="blogList.html">
                    <img src="images/collect.png" alt="">
                    <span>博客列表</span>
                </a>
            </div>
        </div>

        <div class="layui-col-md1">
            <div class="grid-demo grid-demo-bg1">
                <a href="blogEdit.html">
                    <img src="images/write.png" alt="">
                    <span>发布博客</span>
                </a>
            </div>
        </div>

        <div class="layui-col-md1">
            <div class="grid-demo grid-demo-bg1">
                <a href="login.html">
                    <img src="images/login.png" alt="">
                    <span>登录</span>
                </a>
            </div>
        </div>
        <div class="layui-col-md1">
            <div class="grid-demo grid-demo-bg1">
                <a href="#">
                    <img src="images/register.png" alt="">
                    <span>注册</span>
                </a>
            </div>
        </div>
    </div>
</div>


<div class="enter">
    <div class="enroll">
        <h2>博客系统</h2>
        <form action="register" method="post">
            <div class="row">
                <input type="text" name="username" id="id" placeholder="请输入用户名">
            </div>

            <div class="row">
                <input type="password" name="password" id="password" placeholder="请输入密码">
            </div>


            <div class="row">
                <input id="submit" type="submit" value="注册">
            </div>
        </form>

    </div>
</div>
<script>

    let password = document.querySelector('#password');
    let id = document.querySelector("#id");

    let submit = document.querySelector('#submit');
    submit.onclick = function () {
        if (id.value === ''){
            alert("用户名为空,请输入用户名!")
        } else if (password.value === ''){
            alert("密码为空,请输入为空!");
        }
    }
</script>
</body>
</html>